import React from 'react';
import classNames from 'classnames';
import Nav from 'shared/components/nav';
import LineDetail from 'shared/components/lineDetail';
import ThemeSubwayContent from './themeSubwayContent';
import subwayColorEnum from '../consts/subwayColorEnum';
import './index.less';

const loveSeat = require('shared/static/LoveSeat.png');
const directionBlue = require('shared/static/directionBlue.png');

export default class StationDetail extends React.PureComponent {
  redirect(value) {
    this.props.history.push(`/waydetail/${value}`);
  }

  renderDetailHeader() {
    return (
      <div className="station-detail-header">
        <div className="station-detail-info">
          <div className="info-title">韦家碾 - 科学城</div>
          <div className="terminal-point">
            <span>
              往科学城
              <img src={directionBlue} alt="" className="terminal-point-icon" />
            </span>
          </div>
          <div className="coaches">
            {
                [6, 5, 4, 3, 2, 1].map(value => (
                  <div key={value} className="coaches-item">
                    <span>{value}</span>
                    <img src={loveSeat}
                      alt=""
                      className={classNames('coaches-item-icon', {
                        right: value === 3,
                      })}
                    />
                  </div>
                ))
              }
          </div>
        </div>
        <div className="next-station-info">
          <span>前方到站</span>
          <span>天府广场</span>
          <span>预计2分钟</span>
        </div>
      </div>
    );
  }

  render() {
    const { match: { params } } = this.props;
    return (
      [
        <Nav
          to="/"
          history={this.props.history}
          title={`${params.line}号线`}
          key="nav"
          style={{ backgroundColor: subwayColorEnum[params.line] }}
        />,
        <div className="station-detail">
          {this.renderDetailHeader()}
          <LineDetail />
          <ThemeSubwayContent />
        </div>,
      ]
    );
  }
}
